<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="a total">
        <div class="b">
            <div class="a1">网站首页
                <div class="b1"></div>
            </div>
            <div class="a2">学校概括
                <div class="b2"></div>
            </div>
            <div class="a3">新闻公告
                <div class="b3"></div>
            </div>
            <div class="a4">机构设置
                <div class="b4"></div>
            </div>
            <div class="a5">招生就业
                <div class="b5"></div>
            </div>
            <div class="a6">教育教学
                <div class="b6"></div>
            </div>
            <div class="a7">校务公开
                <div class="b7"></div>
            </div>
            <div class="a8">图书馆
                <div class="b8"></div>
            </div>
            <div class="a9">服务大厅
                <div class="b9"></div>
            </div>
            <div class="a10">公共信息
                <div class="b10"></div>
            </div>
            <div class="a11">数字资源
                <div class="b11"></div>
            </div>
        </div>
    </div>
    <div class="c total"></div>
</body>
<style>
    .a {
        width: 1408px;
        height: 55px;
        background-color: rgb(47, 242, 242);
    }

    .b {
        width: 1210px;
        height: 55px;
        margin: auto;
    }

    .a1 {
        width: 110px;
        height: 55px;
        position: relative;
        /* 相对定位（可用于后续子元素定位） */
        text-align: center;
        /* 文字水平居中 */
        line-height: 55px;
        /* 文字垂直居中（因为height=55px） */
        float: left;
    }

    .a1:hover {
        background-color: rgb(250, 250, 250);
        cursor: pointer;/*鼠标箭头变手指*/
    }

    .b1 {
        width: 700px;
        height: 200px;
        background-color: rgb(201, 37, 201);
        position: absolute;
        top: 55px;
        display: none;
    }

    .a1:hover>.b1 {
        display: block;
    }


    .a2 {
        width: 110px;
        height: 55px;
        text-align: center;
        line-height: 55px;
        position: relative;
        float: left;
    }

    .a2:hover {
        background-color: rgb(250, 250, 250);
        cursor: pointer;
    }

    .b2 {
        width: 700px;
        height: 200px;
        background-color:  rgb(201, 37, 201);
        position: absolute;
        top: 55px;
        display: none;
        left: 0;
    }

    .a2:hover>.b2 {
        display: block;
    }

    .a3 {
        width: 110px;
        height: 55px;
        text-align: center;
        line-height: 55px;
        position: relative;
        float: left;
    }

    .a3:hover {
        background-color: rgb(250, 250, 250);
        cursor: pointer;
    }

    .b3 {
        width: 700px;
        height: 200px;
        background-color:  rgb(201, 37, 201);
        position: absolute;
        top: 55px;
        display: none;
    }

    .a3:hover>.b3 {
        display: block;
    }


    .a4 {
        width: 110px;
        height: 55px;
        text-align: center;
        line-height: 55px;
        position: relative;
        float: left;
    }

    .a4:hover {
        background-color: rgb(250, 250, 250);
        cursor: pointer;
    }

    .b4 {
        width: 700px;
        height: 200px;
        background-color:  rgb(201, 37, 201);
        position: absolute;
        top: 55px;
        display: none;
    }

    .a4:hover>.b4 {
        display: block;
    }


    .a5 {
        width: 110px;
        height: 55px;
        text-align: center;
        line-height: 55px;
        position: relative;
        float: left;
    }

    .a5:hover {
        background-color: rgb(250, 250, 250);
        cursor: pointer;
    }

    .b5 {
        width: 700px;
        height: 200px;
        background-color:  rgb(201, 37, 201);
        position: absolute;
        top: 55px;
        display: none;
    }

    .a5:hover>.b5 {
        display: block;
    }


    .a6 {
        width: 110px;
        height: 55px;
        position: relative;
        line-height: 55px;
        text-align: center;
        float: left;
    }

    .a6:hover {
        background-color: rgb(250, 250, 250);
        cursor: pointer;
    }

    .b6 {
        width: 700px;
        height: 200px;
        background-color:  rgb(201, 37, 201);
        position: absolute;
        top: 55px;
        display: none;
    }

    .a6:hover>.b6 {
        display: block;
    }


    .a7 {
        width: 110px;
        height: 55px;
        position: relative;
        line-height: 55px;
        text-align: center;
        float: left;
    }

    .a7:hover {
        background-color: rgb(250, 250, 250);
        cursor: pointer;
    }

    .b7 {
        width: 700px;
        height: 200px;
        background-color:  rgb(201, 37, 201);
        position: absolute;
        top: 55px;
        display: none;
        right: -50px; 
    }

    .a7:hover>.b7 {
        display: block;
    }


    .a8 {
        width: 110px;
        height: 55px;
        position: relative;
        line-height: 55px;
        text-align: center;
        float: left;
    }

    .a8:hover {
        background-color: rgb(250, 250, 250);
        cursor: pointer;
    }

    .b8 {
        width: 700px;
        height: 200px;
        background-color:  rgb(201, 37, 201);
        position: absolute;
        top: 55px;
        display: none;
        right: 0; 
    }

    .a8:hover>.b8 {
        display: block;
    }


    .a9 {
        width: 110px;
        height: 55px;
        position: relative;
        line-height: 55px;
        text-align: center;
        float: left;
    }

    .a9:hover {
        background-color: rgb(250, 250, 250);
        cursor: pointer;
    }

    .b9 {
        width: 700px;
        height: 200px;
        background-color:  rgb(201, 37, 201);
        position: absolute;
        top: 55px;
        display: none;
        right: 0; 
    }

    .a9:hover>.b9 {
        display: block;
    }


    .a10 {
        width: 110px;
        height: 55px;
        position: relative;
        line-height: 55px;
        text-align: center;
        float: left;
    }

    .a10:hover {
        background-color: rgb(250, 250, 250);
        color: rgb(159, 184, 247);
        cursor: pointer;
    }

    .b10 {
        width: 700px;
        height: 200px;
        background-color:  rgb(201, 37, 201);
        position: absolute;
        top: 55px;
        display: none;
        right: 0; 
    }

    .a10:hover>.b10 {
        display: block;
    }


    .a11 {
        width: 110px;
        height: 55px;
        position: relative;
        line-height: 55px;
        text-align: center;
        float: left;
    }

    .a11:hover {
        background-color: rgb(250, 250, 250);
        cursor: pointer;
    }

    .b11 {
        width: 700px;
        height: 200px;
        background-color:  rgb(201, 37, 201);
        position: absolute;
        top: 55px;
        display: none;
        right: 0; 
    }

    .a11:hover>.b11 {
        display: block;
    }
</style>

</html>